<template>
    <div>
      <button @click="saveData">保存数据</button>
      <button @click="getData">获取数据</button>
      <button @click="removeData">移除数据</button>
      <button @click="clearAll">清空所有数据</button>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import storageManager from '../utils/storagemanager';
  
  export default defineComponent({
    name: 'StorageExample',
    methods: {
      saveData() {
        storageManager.setItem('userData', { name: 'John Doe', age: 30 });
        storageManager.setSessionItem('sessionData', { name: 'Jane Doe', age: 25 });
      },
      getData() {
        const userData = storageManager.getItem<{ name: string; age: number }>('userData');
        const sessionData = storageManager.getSessionItem<{ name: string; age: number }>('sessionData');
        console.log('User Data:', userData);
        console.log('Session Data:', sessionData);
      },
      removeData() {
        storageManager.removeItem('userData');
        storageManager.removeSessionItem('sessionData');
      },
      clearAll() {
        storageManager.clear();
        storageManager.clearSession();
      }
    }
  });
  </script>